<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
</head>
<body>
<!--图片上传-->
<div class="x-body">
    <form class="layui-form">
        <!--     input存图片地址   -->
        <input type="hidden" name="url" class="image">
        <div class="layui-form-item">
            <label class="layui-form-label ">照片:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传头像</button>


                <div class="layui-upload-list" style="margin-left: 100px">
                    <!--                    img这里在页面上显示图片，  width="200" height="100"设置图片宽高度-->
                    <img class="layui-upload-img" id="demo1" width="100" height="150" >
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="employName" class="layui-form-label">
                <span class="x-red">*</span>姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="employName" name="employName" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>昵称
            </div>
        </div>

        <div class="layui-form-item">
            <label for="sex" class="layui-form-label">
                <span class="x-red">*</span>性别
            </label>
            <div class="layui-input-inline">
                <input type="text" id="sex" name="sex" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="age" class="layui-form-label">
                <span class="x-red">*</span>年龄
            </label>
            <div class="layui-input-inline">
                <input type="text" id="age" name="age" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="date" class="layui-form-label">
                <span class="x-red">*</span>出生日期
            </label>
            <div class="layui-input-inline">
                <input type="text" id="date" name="date" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>







        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red">*</span>手机
            </label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" required="" lay-verify="phone"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="email" class="layui-form-label">
                <span class="x-red">*</span>邮箱
            </label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email" required="" lay-verify="email"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="education" class="layui-form-label">
                <span class="x-red">*</span>学历
            </label>
            <div class="layui-input-inline">
                <input type="text" id="education" name="education" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="department" class="layui-form-label">
                <span class="x-red">*</span>部门
            </label>
            <div class="layui-input-inline">
                <input type="text" id="department" name="department" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

  <!--      <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>职务</label>
            <div class="layui-input-block">
                &lt;!&ndash; 角色复选框隐藏值&ndash;&gt;
                <input type="hidden" name="roleId" id="roleId">
                <ul th:each="x:${roleList}" style="float: left">
                    &lt;!&ndash;                    通过id进行向后端传值&ndash;&gt;
                    <li  onclick="getRid()"> <input type="checkbox" name="rName" lay-skin="primary" th:title="${x.rName}" th:value="${x.rId}"></li>
                </ul>

            </div>
        </div>-->



        <div class="layui-form-item">
            <label for="duty" class="layui-form-label">
                <span class="x-red">*</span>职务
            </label>
            <div class="layui-input-inline">
                <input type="text" id="duty" name="duty" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="rDate" class="layui-form-label">
                <span class="x-red">*</span>入职时间
            </label>
            <div class="layui-input-inline">
                <input type="text" id="rDate" name="rDate" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="state" class="layui-form-label">
                <span class="x-red">*</span>状态
            </label>
            <div class="layui-input-inline">
                <input type="text" id="state" name="state" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

<!--        <div class="layui-form-item">
            <label for="state" class="layui-form-label">
                <span class="x-red">*</span>状态
            </label>
            <div class="layui-input-inline">
                <input type="text" id="state" name="state" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>


        <div class="layui-form-item">
            <label for="userPwd" class="layui-form-label">
                <span class="x-red">*</span>密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="userPwd" name="userPwd" required="" lay-verify="userPwd"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                3到16个字符
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>确认密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                       autocomplete="off" class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                点击投递
            </button>
        </div>
    </form>
</div>
</body>
</html>

<script>
    <!--    加载的主键-->
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            //后端地址
            ,url: '/recruit/upload/'
            //隐藏域的地址，就在上面代码哪里
            ,accept:'url'
            ,size:50000
            ,before: function(obj){
                obj.preview(function(index, file, result){
                    //显示上传图片
                    $('#demo1').attr('src', result);
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                var demoText = $('#demoText');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                var fileupload = $(".image");
                //把图片在项目中的路径存入到 属性 class=image的input框中
                fileupload.attr("value",res.src);
                console.log(fileupload.attr("value"));
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #226cff;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

    //写复选框的操作代码
    //获取选中角色是复选框的值

    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

        //自定义验证规则,这里的userName和userPwd要和前面一一对应
        // form.verify({
        //     userName:function (value) {
        //         if (value.length < 3) {
        //             return '昵称至少得3个字符啊';
        //         }
        //     }
        //     , userPwd: [/(.+){3,12}$/, '密码必须3到12位']
        //     , repass: function (value) {
        //         if ($('#userPwd').val() != $('#L_repass').val()) {
        //             return '两次密码不一致';
        //         }
        //     }
        // });
        //新增按钮
        form.on('submit(add)', function(data){
            $.ajax({
                url:"/recruit/save/add",
                async: false,
                type:"POST",
                dataType: "json",
                data:data.field,
                success: function(data){

                    if(data==true){
                        console.log(data.field);
                        layer.alert("增加成功", {icon: 6},function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                            //刷新
                            parent.window.location.replace("/recruit/listRecruit")
                        });
                    }else{
                        console.log(data.field+"----------");
                        layer.msg('增加失败!',{icon: 6,time:1000});
                    }

                }
            })


            return false;
        });

     });



    function getRid() {
        var rId="";
        $('input[type=checkbox]:checked').each(function() {
            rId+=$(this).val()+",";
        });
        console.log(rId)
        $("#roleId").val(rId);
    }


</script>